<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/common.js"></script>
    <style>
        html {
            height: 5000px;
            width: 3000px;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

<script>
    console.log(4);

    // window相关的事件  (页面相关的事件)
    // onload    等页面所有内容加载完毕再执行
    // onresize  当页面大小改变时触发此事件
    // onscroll  当页面滚动条滚动时执行


    /* resizeHandler();  // 页面加载时执行
    window.onresize = resizeHandler;  //  绑定事件


    function resizeHandler() {
        console.log(window.innerWidth, window.innerHeight);

        var body = document.getElementsByTagName("body")[0];
        if (window.innerWidth >= 1024) {
            body.style.backgroundColor = "red";
        } else if (window.innerWidth >= 768) {
            body.style.backgroundColor = "orange";
        } else {
            body.style.backgroundColor = "pink";
        }
    } */


    scrollHandler();
    window.onscroll = scrollHandler;



    function scrollHandler() {
        console.log("scrolling");
    }





</script>

</html>